import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Form, Divider, Card, Button } from 'antd';
import Img from 'react-image';
import DescriptionList from '../../components/DescriptionList';
import globalConstant from '../../utils/globalConstant';


const { Description } = DescriptionList;


@connect(({ packages, loading }) => ({
  packages,
  loading: loading.models.packages,
}))
@Form.create()
export default class ShowPackageInfo extends PureComponent {
  state = {
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'packages/getPackageInfo',
      payload: {
        id: this.props.packageId,
      },
    });
  }
  handleChangeRelease =() => {
    this.props.dispatch({
      type: 'packages/releasePackage',
      payload: {
        id: this.props.packageId,
      },
      callback: () => {
        this.props.childShowInfo(true);
      },
    });
  }
  handleCheckPackage =() => {
    this.props.dispatch({
      type: 'packages/checkPackage',
      payload: {
        id: this.props.packageId,
      },
      callback: () => {
        this.props.dispatch({
          type: 'packages/getPackageInfo',
          payload: {
            id: this.props.packageId,
          },
        });
      },
    });
  }
  render() {
    const { packages: { packageInfo }, loading } = this.props;
    console.log('packageInfo', packageInfo);
    return (
      <Card bordered={false} loading={loading}>
        <DescriptionList size="large" title="套餐信息" style={{ marginBottom: 32 }}>
          <Description term="套餐名称">{packageInfo.packageName}</Description>
          <Description term="套餐时长">{packageInfo.packageValidTime}</Description>
          <Description term="违约费率">{packageInfo.contractRate}</Description>
          <Description term="套餐价格">{packageInfo.packagePrice}</Description>
          <Description term="上架时间">{moment(packageInfo.releaseTime).format(globalConstant.dateFormat)}</Description>
          <Description term="下架时间">{moment(packageInfo.invalidTime).format(globalConstant.dateFormat)}</Description>
          <Description term="套餐ID">{packageInfo.bussinessId}</Description>
          <Description term="套餐状态">{packageInfo.packageStatusNameTransient}</Description>
          <Description term="套餐简介">{packageInfo.packagesRemark}</Description>
          <Description term="业务说明">{packageInfo.serviceDescription}</Description>
          <Description term="温馨提示">{packageInfo.packageAttention}</Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="业务类型" style={{ marginBottom: 32 }}>
          <Description term="业务名称">{packageInfo.bussinessName}</Description>
          <Description term="下行网速">{packageInfo.networkSpeed}</Description>
          <Description term="覆盖城市">{packageInfo.bussinessCityName}</Description>
          <Description term="覆盖小区">{packageInfo.communityNames}</Description>
          <Description term="图片">
            <Img style={{ width: 170, height: 90 }} src={packageInfo.bussinessPhoto} />
          </Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="发布信息" style={{ marginBottom: 32 }}>
          <Description term="创建人">{packageInfo.createUserNameTransient}</Description>
          <Description term="审核人">{packageInfo.checkUserNameTransient}</Description>
        </DescriptionList>
        {
          packageInfo.packageStatus === 'NETWORK_PACKAGE_STATUS_UNCHECKED' ? (
            <DescriptionList size="large" title="操作" style={{ marginBottom: 32 }}>
              <Description>
                <Button onClick={() => { this.handleCheckPackage(); }}> 未审核 </Button>
              </Description>
            </DescriptionList>
          ) : (
            <DescriptionList size="large" title="操作" style={{ marginBottom: 32 }}>
              <Description>
                <Button disabled> 已审核 </Button>
              </Description>
              {
                packageInfo.packageStatus === 'NETWORK_PACKAGE_STATUS_RELEASE' ?
                  (
                    <Description>
                      <Button disabled> 已发布 </Button>
                    </Description>
                  ) : (
                    <Description>
                      <Button onClick={() => { this.handleChangeRelease(); }}> 发布 </Button>
                    </Description>
                  )
              }
            </DescriptionList>
          )
        }
      </Card>
    );
  }
}
